说明
codeMirror是一款十分强大的代码编辑插件,提供了十分丰富的API,最近在项目中用到了这款插件,做一个记录。
安装
- 下载安装包 在github上直接download 或者 clone
-
npm 安装
npm install --save codemirror
引入
*手动引入外部的
<link href="./static/codemirror/lib/codemirror.css" rel="stylesheet" > // 必要
<script src="./static/codemirror/lib/codemirror.js"></script> // 必要
<script src="./static/codemirror/mode/sql/sql.js"></script> // 在线编辑的语言 sql
<script src="./static/codemirror/mode/sql/javscript.js"></script> // 在线编辑的语言 javascript
*npm引入(vue项目中)
import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在线编辑的语言 sql
require('codemirror/addon/display/placeholder') // 需要使用placeholder属性
使用
- 基本使用
<template>
<textarea placeholder="例如select * from table" ref="myCodeMirror"></textarea>
</template>
<script>
import "codemirror/lib/codemirror.css" //必要
const CodeMirror = require("codemirror/lib/codemirror") // 必要
require("codemirror/mode/sql/sql") // 在线编辑的语言 sql
require('codemirror/addon/display/placeholder') // 需要使用placeholder属性
export default {
...
mounted () {
this.myCodeMirror = CodeMirror.fromTextArea(this.$refs['myCodeMirror'], {
lineNumbers: true, // 是否显示行数
mode: 'text/x-pgsql', // 使用什么模式 text/x-pgsql是sql javascript等
showCursorWhenSelecting: true, // 当有选中的时候是否显示光标
extraKeys: {'Ctrl': 'autocomplete'} // 自定义快捷键
})
}
}
</script>
- 获取输入内容
this.myCodeMirror.getValue()
- 获取选中内容
this.myCodeMirror.getSelection()
说明
官网提供了十分丰富的API,当有什么问题是在github上提问,作者回复的也很快,非常好用,赞一个
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。